<template>
  <a-modal
    :title="title"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    :class="editType =='detail'?'pic-preview':''"
    :cancelText="editType =='detail'?'关闭':'取消'">
    
    <a-spin :spinning="confirmLoading">
      <a-form :form="form" class="clearfix">
        <a-row :class="editType == 'detail'?'hasData':''">
          <a-col :span="8">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="公司全称">
          <a-input placeholder="请选择公司" v-show v-decorator="['CompanyId', validatorRules.companyid]"></a-input>
          <a-input placeholder="请选择公司" @input="clearCompanyId" :disabled="editType=='detail'" @click="showCommonModal" v-decorator="['DemandUser_Company_CompanyName',{}]"></a-input>
          <!-- <a-select :disabled="editType=='detail'" show-search :filter-option="filterOption" placeholder="请选择公司" @change="getPerson" v-decorator="['CompanyId', validatorRules.companyid]" >
            <a-select-option value="">请选择</a-select-option>
            <a-select-option :value="item.CompanyId" v-for="(item,index) in companyData">{{item.CompanyName}}</a-select-option>
          </a-select> -->
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="互动类型">
          <a-select :disabled="editType=='detail'" placeholder="请输入互动类型" v-decorator="['InteractiveTypeId', validatorRules.interactivetypeid]">
            <a-select-option value="">请选择</a-select-option>
            <a-select-option :value="item.BaseInfoId" v-for="(item,index) in interactiveTypeData">{{item.Value}}</a-select-option>
          </a-select>
        </a-form-item>
        </a-col>
      <a-col :span="8">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="互动日期">
          <a-date-picker :disabled="editType=='detail'" placeholder="请输入互动日期" v-decorator="['InteractiveDate', validatorRules.interactivedate]" />
        </a-form-item>
        </a-col>
      <!-- <a-col :span="8">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="互动主题">
          <a-input :disabled="editType=='detail'" placeholder="请输入互动主题" v-decorator="['InteractiveTheme', validatorRules.interactivetheme]" />
        </a-form-item>
        </a-col> -->
      
      <a-col :span="8">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="互动地点">
          <a-input :disabled="editType=='detail'" placeholder="请输入互动地点" v-decorator="['InteractiveAddress', {}]" />
        </a-form-item>
        </a-col>
      <a-col :span="8">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="互动对象">
          <a-input :disabled="editType=='detail'" placeholder="请输入互动对象" v-decorator="['Visitors', validatorRules.visitors]" />
          <!-- <a-select :disabled="editType=='detail'" mode="multiple" placeholder="请输入互动对象" v-decorator="['Visitors', validatorRules.visitors]" >
            <a-select-option :value="item.PersonalInfo_PersonalName" v-for="(item,index) in personData">{{item.PersonalInfo_PersonalName}}</a-select-option>
          </a-select> -->
        </a-form-item>
        </a-col>
        
      <a-col :span="8">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="需求标签">
          <a-select :disabled="editType=='detail'" mode="tags"  placeholder="请输入需求标签" v-decorator="['DemandTagId', validatorRules.demandtagid]" >
            <a-select-option :value="item.Value" v-for="(item,index) in demandTagData">{{item.Value}}</a-select-option>
          </a-select>
        </a-form-item>
        </a-col>
      
      
      
        <!-- <a-col :span="24">
        <a-form-item
          class="labelColMax"
          label="互动目的">
          <a-input type="textarea" :disabled="editType=='detail'" placeholder="请输入互动目的" v-decorator="['InteractiveObjective', validatorRules.interactiveobjective]" />
        </a-form-item>
        </a-col> -->
        <a-col :span="24">
        <a-form-item
          class="labelColMax"
          label="需求标题">
          <a-input type="textarea" :disabled="editType=='detail'" placeholder="请输入需求标题" v-decorator="['InteractiveTheme', {rules:[{required:true,message:'请输入'}]}]" />
        </a-form-item>
        </a-col>
        <a-col :span="24">
        <a-form-item
          class="labelColMax"
          label="简单描述">
          <a-input type="textarea" :disabled="editType=='detail'" placeholder="请输入简单描述" v-decorator="['DemandDescription', {rules:[{required:true,message:'请输入'}]}]" />
        </a-form-item>
        </a-col>
        <a-col :span="24">
        <a-form-item
          class="labelColMax"
          label="详细描述">
          <a-input type="textarea" :disabled="editType=='detail'" placeholder="请输入详细描述" v-decorator="['DemandDetail', {rules:[{required:true,message:'请输入'}]}]" />
        </a-form-item>
        </a-col>
        <a-col :span="24">
        <a-form-item
          class="labelColMax"
          label="其它备注">
          <a-input :disabled="editType=='detail'" type="textarea" placeholder="请输入其它备注" v-decorator="['Remarks', {}]" />
        </a-form-item>
        </a-col>
        <a-col :span="8">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="Linker">
          <a-select mode="multiple" :disabled="editType=='detail'" placeholder="请输入Linker" v-decorator="['LinkerId', validatorRules.linkerid]" >
            <a-select-option value="">请选择</a-select-option>
            <a-select-option :value="item.Name" v-for="(item,index) in LinkData">{{item.Name}}</a-select-option>
          </a-select>
        </a-form-item>
        </a-col>
        <a-col :span="8">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="关联用户">
          <a-select :disabled="editType=='detail'" placeholder="请选择关联用户" v-decorator="['DemandUserId', {}]" >
            <a-select-option value="">请选择</a-select-option>
            <a-select-option :value="item.UserInfo" v-for="(item,index) in demandUserData">{{item.UserName}}</a-select-option>
          </a-select>
          <!-- <a-select :disabled="editType=='detail'" placeholder="请选择关联用户" v-decorator="['DemandUserId', {}]" >
            <a-select-option value="">请选择</a-select-option>
            <a-select-option :value="item.Id" v-for="(item,index) in LinkData">{{item.Name}}</a-select-option>
          </a-select> -->
        </a-form-item>
        </a-col>
        <a-col :span="8" v-if="editType !== 'detail'">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="是否发布">
            <a-select :disabled="editType=='detail'"  placeholder="请输入是否发布" v-decorator="['ApproveStatusId', {rules:[{required:true,message:'请选择'}]}]" >
              <a-select-option :value="item.BaseInfoId" v-for="(item,index) in approveStatusData">{{item.Value}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24" v-if="editType == 'detail'">
          <a-form-item
            class="labelColMax"
            label="审批结果">
            <a-radio-group name="radioGroup" :disabled="editType == 'detail'" v-decorator="['ApproveStatusId', {rules:[{required:true,message:'请选择'}]}]">
              <a-radio :value="item.BaseInfoId" v-for="(item,index) in approveStatusData">
                {{item.Value}}
              </a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="24" v-if="editType == 'detail' && model.ApproveStatus_Value == '不同意发布'">
          <a-form-item
            class="labelColMax"
            label="不同意原因">
            <a-input :disabled="editType=='detail'" type="textarea" v-decorator="['ApproveRemark', {}]" />
          </a-form-item>
        </a-col>
        <a-col :span="8" v-if="editType == 'detail' && model.ApproveStatus_Value == '同意发布'">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="供应商数">
            <a-input-number disabled v-decorator="['SupplierNumber', {}]" />
          </a-form-item>
        </a-col>
        <a-col :span="8" v-if="editType == 'detail' && model.ApproveStatus_Value == '同意发布'">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="获取令币">
            <a-input-number :disabled="editType=='detail'" v-decorator="['PayableLin', {}]" />
          </a-form-item>
        </a-col>
        <a-col :span="8" v-if="editType == 'detail' && model.ApproveStatus_Value == '同意发布'">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="发布次数">
            <a-input-number :disabled="editType=='detail'" v-decorator="['PublishTimes', {}]" />
          </a-form-item>
        </a-col>
        <a-col :span="8" v-if="editType == 'detail' && model.ApproveStatus_Value == '同意发布'">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="截止日期">
            <a-date-picker :disabled="editType=='detail'" v-decorator="['ExpiryDate', {}]" />
          </a-form-item>
        </a-col>
        <a-col :span="8" v-if="editType == 'detail' && model.ApproveStatus_Value == '同意发布'">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="最近发布日">
            <a-date-picker :disabled="editType=='detail'" v-decorator="['lastTime', {}]" />
          </a-form-item>
        </a-col>
      </a-row>
		  <div class="dataDiv" v-if="editType == 'detail'">
        <div class="dataHead">
          <h5 class="modalh5">近半年历史记录</h5>
          <div class="demandList">
            <li class="demandHead">
              <span>需求类型</span>
              <span>需求日期</span>
            </li>
            <li :class="dataObj.CompanyInteractiveId == item.CompanyInteractiveId?'activeLi':''" @click="dataObj = item" class="demandItem" v-for="item in companyDemandData">
              <span>{{item.InteractiveType_Value}}</span>
              <span>{{item.InteractiveDate}}</span>
            </li>
          </div>
        </div>
        <div class="dataBody">
          <div>
            <label>需求标题：</label>
            <a-input disabled v-model="dataObj.InteractiveTheme" type="textarea"></a-input>
          </div>
          <div>
            <label>详细描述：</label>
            <a-input disabled v-model="dataObj.DemandDetail" style="min-height: 60px" type="textarea"></a-input>
          </div>
          <div>
            <label>获取令币：</label>
            <a-input disabled v-model="dataObj.PayableLin"></a-input>
          </div>
          <div>
            <label>供应商数：</label>
            <a-input disabled v-model="dataObj.SupplierNumber"></a-input>
          </div>
          <div>
            <label>实际获取供应商数：</label>
            <a-input disabled v-model="dataObj.ActuralSupplierNumber"></a-input>
          </div>
          <div>
            <label>状态：</label>
            <a-input disabled v-model="dataObj.ApproveStatus_Value"></a-input>
          </div>
        </div>
      </div>
      </a-form>
    </a-spin>
    <commonModal
      modalTitle="公司选择"
      ref="commonModal"
      @getCommonModalData="commonModalData"
      :columns="tableColumns"
      apiUrl="/companyInfo/queryRows"
      :searchArr="searchArr"></commonModal>
  </a-modal>
</template>

<script>
  import { httpAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from "moment"
  import commonModal from '@/components/commonModal'
  export default {
    name: "CompanyInteractiveModal",
    components:{
      commonModal
    },
    watch:{
      visible(newVal,oldVal){
        if(newVal){
          this.editType = sessionStorage.getItem('editType');
        }
      }
    },
    data () {
      return {
        approveStatusData:[],
        demandUserData:[],
        tableColumns:[
          { title: '公司全称', dataIndex: 'CompanyName' },
          { title: '公司编码', dataIndex: 'CompanyCode' },
        ],
        searchArr:[
          { label: '公司全称', key: 'CompanyName' },
          { label: '公司编码', key: 'CompanyCode' },
        ],
        editType:'',
        LinkData:[],
        demandTagData:[{
          id:'105',
          name:'融资'
        },{
          id:'106',
          name:'贷款'
        },{
          id:'107',
          name:'政策申报'
        },{
          id:'108',
          name:'税务筹划'
        },{
          id:'109',
          name:'活动'
        },{
          id:'110',
          name:'宣传'
        },{
          id:'111',
          name:'招聘'
        },{
          id:'112',
          name:'培训'
        },{
          id:'113',
          name:'办公场地'
        },{
          id:'114',
          name:'项目落户'
        },{
          id:'115',
          name:'其它'
        },],
        interactiveTypeData:[{
          id:'99',
          name:'采访'
        },{
          id:'100',
          name:'拜访'
        },{
          id:'101',
          name:'接待'
        },{
          id:'102',
          name:'活动/会议'
        },{
          id:'103',
          name:'线上(微信/电话等)'
        },{
          id:'104',
          name:'其它'
        }],
        personData:[],
        companyData:[],
        title:"操作",
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 },
        },
        companyDemandData:[],
        dataObj:{},
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
        companyinteractiveid:{rules: [{ required: true, message: '请输入互动信息ID!' }]},
        companyid:{rules: [{ required: true, message: '请选择公司!' }]},
        interactivetypeid:{rules: [{ required: true, message: '请输入互动类型!' }]},
        interactivedate:{rules: [{ required: true, message: '请输入互动日期!' }]},
        interactivetheme:{rules: [{ required: true, message: '请输入互动主题!' }]},
        interactiveobjective:{rules: [{ required: true, message: '请输入互动目的!' }]},
        interactiveaddressv:{rules: [{ required: true, message: '请输入!' }]},
        visitors:{rules: [{ required: true, message: '请输入互动对象!' }]},
        demandtagid:{rules: [{ required: true, message: '请输入需求标签!' }]},
        interactiveaddress:{rules: [{ required: true, message: '请输入互动地点!' }]},
        demanddescription:{rules: [{ required: true, message: '请输入需求描述!' }]},
        remarks:{rules: [{ required: true, message: '请输入其它备注!' }]},
        linkerid:{rules: [{ required: true, message: '请输入Linker!' }]},
        updatebyid:{rules: [{ required: true, message: '请输入最近更新人!' }]},
        ts:{rules: [{ required: true, message: '请输入最近更新日期!' }]},
        datastatus:{rules: [{ required: true, message: '请输入状态!' }]},
        },
        url: {
          add: "/companyInteractive/add",
          edit: "/companyInteractive/update",
          baseList:"/baseInfo/queryRows",
        },
      }
    },
    created () {
      this.getBaseData();
      this.getLinker();
      // this.getCompany();
      this.getDemandUser();
    },
    methods: {
      clearCompanyId(){
        console.log('aaa');
        this.form.setFieldsValue({
          'CompanyId':''
        })
      },
      getDemandUser(){
        this.$http.postAction('/userIdentification/queryRows',{pageNo:1,pageSize:9999,selectFields:[],conditions:[{
              "field":"IdentificationStatus",
              "operator":"=",
              "value":"509102434019180544"
            }]}).then((res)=>{
            if(res.status == 1){
              this.demandUserData = res.data.rows;
            }
          })
      },
      showCommonModal () {
        this.$refs.commonModal.open()
      },
      commonModalData(val){
        this.form.setFieldsValue({
          CompanyId:val[0].CompanyId,
          DemandUser_Company_CompanyName:val[0].CompanyName,
          Visitors:[]
        })
        this.getPerson();
      },
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      getBaseData(){
        this.$http.postAction(this.url.baseList,{pageNo:1,pageSize:100,selectFields:[],conditions:[{
              "field":"TypeCode",
              "operator":"=",
              "value":'InteractiveType'
            }]}).then((res)=>{
          if(res.status == 1){
            this.interactiveTypeData = res.data.rows;
          }
        })
        this.$http.postAction(this.url.baseList,{pageNo:1,pageSize:100,selectFields:[],conditions:[{
              "field":"TypeCode",
              "operator":"=",
              "value":'DemandTag'
            }]}).then((res)=>{
          if(res.status == 1){
            this.demandTagData = res.data.rows;
          }
        })
        this.$http.postAction(this.url.baseList,{pageNo:1,pageSize:100,selectFields:[],conditions:[{
              "field":"TypeCode",
              "operator":"=",
              "value":'ApproveStatus'
            }]}).then((res)=>{
          if(res.status == 1){
            this.approveStatusData = res.data.rows;
          }
        })
      },
      getLinker(){
        this.$http.postAction('/user/queryRows',{pageNo:1,pageSize:9999,conditions:[{
              "field":"WorkStatus",
              "operator":"=",
              "value":'78'
            }]}).then((res)=>{
          if(res.status == 1){
            this.LinkData = res.data.rows;
          }
        })
      },
      getPerson(type){
        this.$nextTick(()=>{
          let data = this.form.getFieldsValue();
          if(!data.CompanyId){
            return false;
          }
          if(type !== 'init'){
            this.form.setFieldsValue({
              Visitors:[],
              LinkerId:''
            })
          }
          this.$http.postAction('/companyStaff/queryRows',{pageNo:1,pageSize:9999,selectFields:[],conditions:[{
              "field":"Company",
              "operator":"=",
              "value":data.CompanyId
            }]}).then((res)=>{
            if(res.status == 1){
              this.personData = res.data.rows;
            }
          })
        })
        
      },
      getCompany(){
        this.$http.postAction('/companyInfo/queryRows',{pageNo:1,pageSize:9999}).then((res)=>{
          if(res.status == 1){
            this.companyData = res.data.rows;
          }
        })
      },
      getHistory(){
        this.$http.postAction('/companyInteractive/queryRows',{pageNo:1,pageSize:9999,selectFields:[],conditions:[{
              "field":"Company",
              "operator":"=",
              "value":this.model.CompanyId
            },
            {
              "field":"ExpiryDate",
              "operator":"<",
              "value":this.format(Date.parse(new Date()))
            },{
              "field":"ExpiryDate",
              "operator":">",
              "value":this.format(Date.parse(new Date()) - (780 * 24 * 3600 * 1000))
            }
            ]}).then((res)=>{
          if(res.status == 1){
            this.companyDemandData = res.data.rows;
          }
        })
      },
      format(unixtime) {
        var date = new Date(unixtime);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        // m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        // d = d < 10 ? ('0' + d) : d;
        // var h = date.getHours();
        // h = h < 10 ? ('0' + h) : h;
        // return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;//年月日时分秒
        return y + '-' + m + '-' + d;

      },
      add () {
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        if(!this.model.InteractiveDate){
          this.model.InteractiveDate = new Date();
        }
        
        this.$nextTick(() => {
          this.model.DemandTagId = this.model.DemandTag?this.model.DemandTag.split(','):[];
          this.model.InteractiveTypeId = this.model.InteractiveType;
          this.model.LinkerId = this.model.Linker?this.model.Linker.split(','):[];
          this.model.ApproveStatusId = this.model.ApproveStatus?this.model.ApproveStatus:'';
          this.model.DemandUserId = this.model.DemandUser?this.model.DemandUser:'';
          if(this.model.LinkerId.length == 0){
            this.model.LinkerId = localStorage.getItem('userInfo')?[JSON.parse(localStorage.getItem('userInfo')).userName]:[];
          }
          this.model.CompanyId = this.model.DemandUser_CompanyId;
          this.model.lastTime = this.model.Ts?this.format(parseInt(this.model.Ts)):null;
          let type = sessionStorage.getItem('editType')?sessionStorage.getItem('editType'):'';
          if(type == 'detail'){
            this.getHistory();
          }
          this.form.setFieldsValue(pick(this.model,'CompanyId','InteractiveTypeId','InteractiveTheme','InteractiveObjective','InteractiveAddress','Visitors','DemandTagId','DemandDescription','Remarks','LinkerId','DemandUser_Company_CompanyName','DemandDetail','DemandTitle','DemandUserId','ApproveStatusId','ExpiryDate','lastTime','PublishTimes','PayableLin','SupplierNumber','ApproveRemark'))
		  //时间格式化
      this.getPerson('init');
      this.form.setFieldsValue({InteractiveDate:this.model.InteractiveDate?moment(this.model.InteractiveDate,'YYYY-MM-DD HH:mm:ss'):null})
      this.form.setFieldsValue({ExpiryDate:this.model.ExpiryDate?moment(this.model.ExpiryDate,'YYYY-MM-DD HH:mm:ss'):null})
      this.form.setFieldsValue({lastTime:this.model.lastTime?moment(this.model.lastTime,'YYYY-MM-DD HH:mm:ss'):null})
        });

      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.CompanyInteractiveId){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            let formData = Object.assign(this.model, values);
            //时间格式化
            formData.InteractiveDate = formData.InteractiveDate?formData.InteractiveDate.format('YYYY-MM-DD HH:mm:ss'):null;
            formData.Visitors = formData.Visitors instanceof Array?formData.Visitors.join(','):formData.Visitors;
            formData.DemandTagId = formData.DemandTagId instanceof Array?formData.DemandTagId.join(','):formData.DemandTagId;
            formData.LinkerId = formData.LinkerId instanceof Array?formData.LinkerId.join(','):formData.LinkerId;
            console.log(formData)
            // formData.DemandUserId = '0';
            if(this.title == '重新提交'){
              httpurl = '/companyInteractive/resubmit'
            }
            this.$http.postAction(httpurl,formData,method).then((res)=>{
              if(res.status == 1){
                that.$message.success('提交成功');
                that.close();
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              // that.close();
            })



          }
        })
      },
      handleCancel () {
        this.close()
      },


    }
  }
</script>

<style lang="less" scoped>
.hasData{
  width:70%;
  float: left;
}
.dataDiv{
  width:30%;
  float: left;
  box-sizing: border-box;
  border-right:solid 1px #dedede;
}
.dataHead{
  margin-left: 1%;
  border-left:solid 1px #dedede;
  padding-left: 5px;
}
.dataBody{
  margin-left: 1%;
  border-left:solid 1px #dedede;
  padding-left: 5px;
  padding-top:10px;
  padding-right:10px;
}
.demandList{
  height:150px;
  overflow-y: auto;
  border-bottom:solid 1px #dedede;

}
.demandHead{
  margin-top:5px;
}
.demandHead span{
  display: inline-block;
  width: 50%;
  text-align: left;
  height:24px;
  line-height: 24px;
}
.demandItem{
  cursor: pointer;
}
.demandItem span{
  display: inline-block;
  width: 50%;
  text-align: left;
  height:24px;
  line-height: 24px;
}
.demandItem:hover{
  background-color: #c9e9f6
}
.activeLi{
  background-color: #c9e9f6
}
</style>
<style>
  .labelColMax .ant-form-item-label{
    width: 107px;
    float: left;
  }
  .labelColMax .ant-form-item-control-wrapper{
    width: calc(100% - 120px);
    display: inline-block;
  }
  .labelColMid .ant-form-item-label{
    width: 107px;
    float: left;
  }
  .labelColMid .ant-form-item-control-wrapper{
    width: calc(100% - 120px);
    display: inline-block;
  }
</style>